<template>
    <div class="heder">
        <h1>嘻嘻音乐</h1>
        <div class="singg">
            <ul>
                 <li 
                 v-for="(item,index) in lists" :key="index"
                 @click="toggleClass(index)"
                 ><span :class="count==index?'active':''">{{item}}</span></li>
               
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
        count:0,
        lists:['推荐','歌手','排行','搜索']
 
        }
    },
    methods:{
        toggleClass(val){
            /* 切换类名 */
            this.count=val
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .heder{
        height: .6rem;
       background-color: #222;
        font-size: .16rem;
        h1{
            display: block;
            height: .3rem;
            line-height: .3rem;
            color: #ffcd32!important;
            font-size: .18rem;
        }
        /* display: flex;
        align-items: center;
        justify-content: center; */
        .singg{
            ul{
                display: flex;
                height: .4rem;
                line-height: .4rem;
                li{
                    flex: 1;
                   color: hsla(0,0%,100%,.5);
                    text-align: center;
                    font-size: .14rem;
                      box-sizing: border-box;
                    span{
                        display:inline-block;
                        height: .3rem;
                    &.active{
                        color: #ffcd32;
                        border-bottom: 2px solid #ffcd32 ;
                    }
                        
                    }
                }
                 
            }
        }
        h1{
          display: block;
          color: white;
          font-size: .15rem;
        
        }
    }
</style>